<template>
  <!-- 小吃 -->
  <div class="max-full">
    <HeadTail></HeadTail>
    <div>
      <div class="flex w-full">
        <div class="w-[10%] text-xl">
          <div class="w-4/5 flex flex-col flex-nowrap">
            <span
              class="cursor-pointer mt-[6.875rem] text-right xl:text-3xl  lg:text-lg md:text-base sm:text-xs leading-[10px]"
              @click="tohome">首页</span
            >
            <span
              class="cursor-pointer mt-[6.875rem] text-right xl:text-3xl  lg:text-lg md:text-base sm:text-xs leading-[10px] text-zinc-500"
              >分类</span
            >
            <span
              class="cursor-pointer mt-[6.875rem] text-right xl:text-3xl  lg:text-lg md:text-base sm:text-xs leading-[10px]"
              @click="tostore">收藏</span
            >
            <span
              class="cursor-pointer mt-[6.875rem] text-right xl:text-3xl  lg:text-lg md:text-base sm:text-xs leading-[10px]"
              @click="toorder">订单</span
            >
          </div>
        </div>
        <div class="w-4/5 text-xl">
          <div
            class="w-full bg-[#fdc14b] flex items-center justify-around h-[4rem] mt-[48px]"
          >
            <span
              class="cursor-pointer text-[1.875rem]"
              v-for="(item, index) in head2"
              :key="index"
              @click="getindex(index)"
              >{{ item.title }}</span
            >
          </div>
          <div
            class="w-full mt-[17px] m-auto rounded-2xl mb-[54px] overflow-hidden"
          >
            <el-carousel :interval="5000" arrow="always" height="220px">
              <el-carousel-item v-for="item in lun" :key="item.id">
                <img :src="item.img" alt="" class="w-full h-full" />
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="flex flex-wrap justify-between">
            <div
              v-for="(item, index) in shop"
              :key="index"
              class="w-[45%] 2xl:h-[400px] sm:h-[300px] m-2 border border-black rounded-xl mb-8 flex flex-col relative"
            >
              <div class="flex m-2">
                <img
                  :src="item.img.split(',')[2]"
                  alt=""
                  class="w-1/3 sm:h-[100px] xl:h-[200px] rounded-md"
                />

                <div class="m-1 2xl:text-[30px] sm:text-[15px]">
                  <p class="mt-[10%]">商家:{{ item.name }}</p>
                  <p class="mt-[20%]">商品名称：{{ item.productName }}</p>
                </div>
              </div>
              <div class="ml-2 2xl:text-[25px] sm:text-[15px] w-4/5">
                介绍:{{ item.description }}
              </div>
              <div
                class="rounded-md mt-[250px] bg-[#fdc14b] text-white 2xl:text-[30px] sm:text-[15px] 2xl:w-[142px] sm:w-[71px] 2xl:h-[46px] sm:h-[23px] text-center flex justify-center items-center absolute bottom-2 right-2 cursor-pointer"
              >
                <p class="" @click="gtocar(item)">下单</p>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import HeadTail from "@/components/Nhome/HeadTail.vue";
import axios from "axios";
import { reactive, ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route=useRoute()
  let idnum = ref();
let head2 = reactive([
  { title: "主食" },
  { title: "小吃" },
  { title: "甜品" },
  { title: "饮品" },
]);
let shop = ref({});
let lun = reactive([
  { id: 1, img: "https://pic1.imgdb.cn/item/6472e7c3f024cca173435f36.png" },
  { id: 2, img: "https://pic1.imgdb.cn/item/6472e7c3f024cca173435ff9.png" },
  { id: 3, img: "https://pic1.imgdb.cn/item/6472e7c3f024cca17343607c.png" },
  { id: 4, img: "https://pic1.imgdb.cn/item/6472e7c3f024cca173435eb6.png" },
]);
let shopimg = reactive([]);
onMounted(() => {
  idnum.value =route.query.id ;
  console.log(idnum.value);
  axios
    .get(
      `http://1.14.126.98:8081/product/productsByCategory?current=1&size=10&category=主食`
    )
    .then((res) => {
      shop.value = res.data;
    });
});
const category = ref("");
function getindex(index) {
  if (index == 0) {
    category.value = "主食";
    getdata();
  } else if (index == 1) {
    category.value = "小吃";
    getdata();
  } else if (index == 2) {
    category.value = "甜品";
    getdata();
  } else if (index == 3) {
    category.value = "饮料";
    getdata();
  }
}
function goto(index){
  router.push({ path: 'orDer', query:shop.value[index]})
}
function getdata() {
  axios
    .get(
      `http://1.14.126.98:8081/product/productsByCategory?current=1&size=10&category=${category.value}`
    )
    .then((res) => {
      shop.value = res.data;
      console.log(shop);
    });
}
function tohome() {
  router.push('Nhome')
}
function tostore() {
  router.push('StoreUp')
}
function toorder() {
  router.push('OrderForm')
}
function gtocar(item) {
  router.push({
    name: "Card",
    query: {
      item: JSON.stringify(item),
      userid: JSON.stringify(idnum.value),
    },
  });
}
</script>
